<template>
  <header class="header">
    <a class="header-logo" href="#home" style="text-decoration: none;">
      <h2 class="header-title">AIToEdu</h2>
      <img src="../assets/logo.png" style="height: 40px">
    </a>
    <nav>
      <a href="#home">首页</a>
      <a href="#courses">课程</a>
      <a href="#aiteacher">教师</a>
      <a href="#students">学生</a>
      <a href="#about">关于我们</a>
    </nav>
    <div class="search-login">
      <div class="search-box">
        <el-input
          type="text" size="large" prefix-icon="Search" placeholder="搜索"
          class="el-input"
        ></el-input>
      </div>
      <el-button size="large">登录</el-button>
    </div>
  </header>
  <router-view></router-view>
</template>

<script>
export default {

}
</script>

<style>
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif; /* 设置整体字体 */
  box-sizing: border-box;
}

.header {
  height: 20%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #409eff; /* 头部背景颜色 */
  padding: 20px 50px;
}

.header .header-logo {
  display: flex;
  text-align: center;
  line-height: 5px;
}

.header .header-logo .header-title {
  color: white;
  width: 100px;
  margin-right: 10px;
}

.header nav {
  display: flex; /* 导航用Flexbox布局 */
  gap: 30px; /* 导航链接之间的间距 */
}

.header nav a {
  color: white; /* 导航链接的字体颜色 */
  text-decoration: none; /* 去掉链接下划线 */
  font-size: 16px; /* 导航链接的字体大小 */
}

nav {
  text-align: left; /* 将导航栏文字左移 */
  margin-left: -800px; /* 左边内边距 */
}

nav a {
  display: inline-block; /* 使链接元素成为块级元素 */
  margin-right: 15px; /* 设置链接之间的间距 */
}

.header .search-login {
  display: flex; /* 搜索和登录部分用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  gap: 20px; /* 间距设置 */
}

.header .search-box {
  display: flex; /* 搜索框内部用Flexbox布局 */
  align-items: center; /* 垂直居中对齐 */
  padding: 5px 10px; /* 内边距 */
}

.header .search-box .search-box .el-input.el-input__inner{
  background-color: rgba(255, 255, 255, 0.247);
}

</style>
